<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>

<body>
    <button>传统注册</button>
    <button>方法监听注册事件</button>
    <button>attachEvent</button>
    <script>
        // 1.传统注册  同一个元素同一个事件只能设置一个处理函数 后面的会覆盖前面的处理函数
        var btn = document.querySelectorAll('button')
        btn[0].onclick = function () {
            alert('hi')
        }
        btn[0].onclick = function () {
            alert('hihi')
        }
        // 2.方法监听注册事件 addEventListener 
        // (1)同一元素同一事件可以设置多个处理函数 按照代码顺序执行 
        // (2)括号里事件类型为字符型必加引号 不加on 且事件类型与处理函数 逗号 隔开
        // add添加 event事件 listener听
        btn[1].addEventListener('click', function () {
            alert(11)
        })
        btn[1].addEventListener('click', function () {
            alert(1122)
        })
        // 3.attachEvent ie9以前支持  当我没写 不兼容 淘汰
        // btn[2].attachEvent('onclick',function() {
        //     alert(11)
        // })

    </script>
</body>

</html>